html,
body {
  height: 100%;
}

@font-face {
  font-family: "icon";
  src: url("../iconfont2/iconfont.eot?#iefix") format("embedded-opentype"), url("../iconfont2/iconfont.svg#icomoon") format("svg"), url("../iconfont2/iconfont.woff") format("woff"), url("../iconfont2/iconfont.ttf") format("truetype");
}

.icon {
  font-family: "icon";
}

#about {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

#about .content {
  width: 90.66667vw;
  height: 100%;
  margin: 0 auto;
}

#about header {
  height: 11.6vw;
  background: #ff5001;
  z-index: 1;
  position: fixed;
  width: 100%;
}

#about header .header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#about header .header ul {
  height: 100%;
  display: flex;
  justify-content: flex-start;
}

#about header .header ul li {
  height: 100%;
}

#about header .header ul li a {
  display: block;
  font-size: 4.53333vw;
  text-align: center;
  line-height: 11.6vw;
  color: #333;
  padding: 0 3.33333vw;
}

#about header .header ul li .active {
  color: #fff;
}

#about header .header .iconfont {
  font-size: 4.93333vw;
  color: #ffb998;
}

#about header .caidan {
  width: 29.33333vw;
  height: 70vw;
}

#about main {
  flex: 1;
  background: #fff;
  overflow: auto;
  position: relative;
  padding-top: 11.6vw;
}

#about main .bigimg {
  position: relative;
  display: flex;
}

#about main .bigimg .btn {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

#about main .bigimg .btn .icon {
  display: block;
  position: absolute;
  line-height: 8.53333vw;
  text-align: center;
  width: 8.53333vw;
  height: 8.53333vw;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}

#about main .bigimg .btn .black {
  top: 2.66667vw;
  left: 2.66667vw;
}

#about main .bigimg .btn .more {
  top: 2.66667vw;
  right: 2.66667vw;
}

#about main .bigimg .btn .collect {
  bottom: 2.66667vw;
  right: 2.66667vw;
}

#about main .bigimg .btn #show {
  width: 29.33333vw;
  height: 61.33333vw;
}

#about main .bigimg .btn #show .icon-jiantou_shang {
  position: absolute;
  right: 2.4vw;
  top: 5.06667vw;
  font-size: 5.33333vw;
  color: rgba(85, 85, 85, 0.55);
}

#about main .bigimg .btn #show .list {
  background: rgba(85, 85, 85, 0.55);
  position: absolute;
  right: 0;
  top: 11.2vw;
  width: 29.33333vw;
  border-radius: 2.66667vw;
  z-index: 5;
  overflow: hidden;
}

#about main .bigimg .btn #show .list li {
  width: 33.33333vw;
  height: 12.66667vw;
  padding-left: 2.66667vw;
  border-bottom: 0.13333vw solid white;
  display: flex;
  align-items: center;
}

#about main .bigimg .btn #show .list li .iconfont {
  font-size: 4.8vw;
}

#about main .bigimg .btn #show .list li span:nth-child(2) {
  font-size: 4vw;
}

#about main .bigimg .btn #show .list span {
  color: #fff;
}

#about main .bigimg img {
  width: 100%;
  height: 100%;
}

#about main .timu {
  width: 100%;
  height: 40vw;
  border-bottom: 0.26667vw solid #f5f5f5;
}

#about main .timu .content {
  box-sizing: border-box;
  padding-top: 3.33333vw;
}

#about main .timu p:first-child {
  font-size: 4vw;
  line-height: 4.66667vw;
  color: #424242;
}

#about main .timu p:nth-child(2) {
  margin-top: 3.33333vw;
  width: 100%;
  height: 4.8vw;
}

#about main .timu p:nth-child(2) span:first-child {
  font-size: 2.66667vw;
  line-height: 4.8vw;
  color: #ff6017;
}

#about main .timu p:nth-child(2) span:first-child em {
  font-size: 4.8vw;
}

#about main .timu p:nth-child(2) span:last-child {
  font-size: 3.46667vw;
  line-height: 4.8vw;
  color: #1c1c1c;
}

#about main .timu p:nth-child(3) {
  margin-top: 5.33333vw;
  height: 3.33333vw;
  font-size: 3.33333vw;
  line-height: 3.33333vw;
}

#about main .timu p:nth-child(3) span:first-child {
  color: #939393;
}

#about main .timu p:nth-child(3) span:nth-child(2) {
  color: #6b6b6b;
}

#about main .timu p:nth-child(3) span:nth-child(3) {
  color: #ff621c;
}

#about main .timu p:nth-child(3) .iconfont {
  font-size: 4vw;
  color: #aaa;
}

#about main .timu p:nth-child(4) {
  margin-top: 2.93333vw;
  height: 2.93333vw;
  font-size: 2.93333vw;
  line-height: 2.93333vw;
  color: #949494;
  margin-left: 8vw;
}

#about main .yixuan {
  width: 100%;
  height: 13.33333vw;
}

#about main .yixuan .content {
  box-sizing: border-box;
  padding-top: 2.66667vw;
  font-size: 2.93333vw;
}

#about main .yixuan .content span:first-child {
  color: #939393;
}

#about main .yixuan .content span:nth-child(2),
#about main .yixuan .content span:nth-child(3) {
  display: inline-block;
  border: 0.13333vw solid #d4d4d4;
  color: #6b6b6b;
  padding: 1.2vw 0.93333vw;
  margin-left: 0.66667vw;
}

#about main .yixuan .content .iconfont {
  font-size: 4vw;
  color: #aaa;
}

#about main .fenge {
  width: 100%;
  height: 3.33333vw;
  background: #f5f5f5;
}

#about main .appraise {
  width: 100%;
  height: 11.33333vw;
}

#about main .appraise .content {
  font-size: 3.2vw;
  line-height: 11.33333vw;
  color: #aaa;
}

#about main .appraise .content span:nth-child(2) {
  color: #ff5001;
  margin-left: 5.33333vw;
}

#about main .store {
  width: 100%;
  height: 19.33333vw;
}

#about main .store .content p:first-child {
  width: 100%;
  height: 9.46667vw;
  border-bottom: 0.4vw solid #f5f5f5;
  font-size: 4vw;
  line-height: 9.46667vw;
  color: #333;
}

#about main .store .content p:last-child {
  width: 100%;
  height: 9.46667vw;
  font-size: 2.93333vw;
  line-height: 9.46667vw;
  color: #888;
}

#about main .store .content p:last-child span {
  margin-right: 10.66667vw;
}

#about main .recommend {
  width: 100%;
}

#about main .recommend .content {
  padding-top: 3.33333vw;
}

#about main .recommend .content h1 {
  width: 100%;
  height: 3.2vw;
  font-size: 3.2vw;
  line-height: 3.2vw;
  color: #888;
}

#about main .recommend .content ul {
  margin-top: 0.66667vw;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
}

#about main .recommend .content ul li {
  flex-shrink: 0;
  width: 23%;
  height: 32vw;
  margin-top: 3.06667vw;
  display: flex;
  justify-content: space-between;
  align-items: space-between;
  flex-direction: column;
}

#about main .recommend .content ul li img {
  width: 18.66667vw;
  height: 19.33333vw;
}

#about main .recommend .content ul li p:nth-child(2) {
  width: 100%;
  font-size: 2.93333vw;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#about main .recommend .content ul li p:last-child {
  width: 100%;
  height: 2.4vw;
  font-size: 2.4vw;
  line-height: 2.4vw;
  color: #888;
}

#about main .examine {
  width: 100%;
  height: 10.66667vw;
  background: #f5f5f5;
}

#about main .examine a {
  display: inline-block;
  height: 10.66667vw;
  width: 100%;
  line-height: 10.66667vw;
  font-size: 3.06667vw;
  text-align: center;
  color: #888;
}

#about footer {
  width: 100%;
  height: 11.33333vw;
  background: #fff;
  border-top: 0.53333vw solid #eee;
}

#about footer ul {
  width: 100%;
  height: 100%;
}

#about footer ul li {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

#about footer ul li:first-child {
  width: 15.33333vw;
  height: 100%;
  border-right: 0.26667vw solid #eee;
}

#about footer ul li:nth-child(2) {
  width: 19.33333vw;
  height: 100%;
}

#about footer ul li:nth-child(3) {
  width: 29.33333vw;
  height: 100%;
  background: #ff5001;
  font-size: 4vw;
  text-align: center;
  line-height: 11.33333vw;
  color: #fff;
}

#about footer ul li:last-child {
  width: 35.33333vw;
  height: 100%;
  background: #fb6e52;
  font-size: 4vw;
  text-align: center;
  line-height: 11.33333vw;
  color: #fff;
}

#about .gouwuche-mask {
  position: fixed;
  width: 100%;
  bottom: 11.33333vw;
  right: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

#about .gouwuche-mask .gouwuche-p {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  top: -8vw;
}

#about .gouwuche-mask .gouwuche {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #fff;
}

#about .gouwuche-mask .gouwuche .guanbi {
  position: absolute;
  width: 6.66667vw;
  height: 6.66667vw;
  background: #fff;
  border-radius: 50%;
  font-size: 3.33333vw;
  line-height: 6.66667vw;
  text-align: center;
  top: -2.66667vw;
  right: 0vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-top {
  width: 100%;
  height: 24vw;
  border-bottom: 0.13333vw solid #dadada;
  box-sizing: border-box;
  padding-top: 2.93333vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-top img {
  width: 17.33333vw;
  height: 17.33333vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-top .biaoti {
  width: 70vw;
  height: 14.66667vw;
  margin-top: 1.33333vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-top .biaoti p:first-child {
  font-size: 3.2vw;
  line-height: 4vw;
  color: #424242;
}

#about .gouwuche-mask .gouwuche .gouwuche-top .biaoti p:last-child {
  margin-top: 3.73333vw;
  font-size: 2.93333vw;
  line-height: 2.93333vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-top .biaoti p:last-child span:first-child {
  color: #ff5001;
}

#about .gouwuche-mask .gouwuche .gouwuche-top .biaoti p:last-child span:last-child {
  color: #888;
}

#about .gouwuche-mask .gouwuche .gouwuche-yanse {
  width: 100%;
  height: 36.66667vw;
  border-bottom: 0.13333vw solid #dadada;
}

#about .gouwuche-mask .gouwuche .gouwuche-yanse .gouwuche-yanse1 {
  width: 100%;
  height: 17.06667vw;
  box-sizing: border-box;
  padding-top: 2.93333vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-yanse .gouwuche-yanse1 p:first-child {
  width: 100%;
  font-size: 3.33333vw;
  line-height: 3.33333vw;
  color: #888;
}

#about .gouwuche-mask .gouwuche .gouwuche-yanse .gouwuche-yanse1 p:last-child {
  margin-top: 1.6vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-yanse .gouwuche-yanse1 p:last-child span {
  display: inline-block;
  border: 0.26667vw solid #dadada;
  padding: 2.4vw 2.66667vw;
  font-size: 2.93333vw;
  color: #888;
  border-radius: 1.33333vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-yanse .gouwuche-yanse1 p:last-child .active {
  background: #ff5001;
  color: #fff;
}

#about .gouwuche-mask .gouwuche .gouwuche-bottom {
  width: 100%;
  height: 13.33333vw;
  border-bottom: 0.26667vw solid #dadada;
  box-sizing: border-box;
  padding-top: 2.93333vw;
}

#about .gouwuche-mask .gouwuche .gouwuche-bottom p:first-child {
  margin-top: 2.13333vw;
  font-size: 3.06667vw;
  line-height: 3.06667vw;
  color: #888;
}

#about .gouwuche-mask .gouwuche .gouwuche-bottom p:last-child {
  width: 22.4vw;
  height: 7.33333vw;
  border: 0.26667vw solid #dadada;
  border-radius: 1.33333vw;
  display: flex;
  justify-content: flex-start;
}

#about .gouwuche-mask .gouwuche .gouwuche-bottom p:last-child input {
  width: 6.66667vw;
  height: 100%;
  font-size: 4vw;
  line-height: 7.33333vw;
  text-align: center;
  color: #888;
  background: #fff;
}

#about .gouwuche-mask .gouwuche .gouwuche-bottom p:last-child span {
  flex: 1;
  font-size: 4vw;
  line-height: 7.33333vw;
  text-align: center;
  color: #333;
  border-left: 0.13333vw solid #dadada;
  border-right: 0.13333vw solid #dadada;
}
